<template>
  <view
    v-if="visible"
    class="sdk-modal"
    @touchmove.stop.prevent="onCatchMove"
    :class="visible ? 'animated fadeIn' : ''"
  >
    <view class="content">
      <view class="flex">
        <view
          class="title"
          :style="{
            width:
              windowWidth == 375 ? '90%' : windowWidth == 414 ? '88%' : '87%',
          }"
        >
          THE MACALLAN麦卡伦线上精品店小程序使用SDK工具和官方插件收集您的浏览行为数据进行分析，用以优化用户体验，为您提供更好的服务。如果您想了解这些SDK工具和第三方插件的具体细节，请查阅我们的<text
            @click.stop="onLinkClick"
            data-identifier="privacy"
            data-title="SDK和第三方插件清单"
            class="link"
            >SDK和第三方插件清单</text
          >。
        </view>
      </view>
      <view class="btn-wrap flex">
        <view @click.stop="onConfirm" class="confirm-btn">确认</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      windowWidth: uni.getSystemInfoSync().windowWidth,
    };
  },
  methods: {
    onCatchMove() {
      return;
    },
    open() {
      this.visible = true;
      this.$commonSensors.popupEvent('PopupExposure', {'popup_type' : '用户授权', 'popup_name': 'SDK半屏弹窗'})
    },
    //个人信息保护政策
    onLinkClick(e) {
      uni.navigateTo({
        url: "/pages/cms/page?identifier=cms/sdkList&type=sdk",
      });
    },
    onConfirm() {
      this.visible = false;
      this.$emit("confirm");
      this.$commonSensors.popupEvent('PopupClick', {'popup_type' : '用户授权', 'popup_name': 'SDK半屏弹窗', 'button_name': '确认'})
    },
  },
};
</script>

<style lang="scss">
.sdk-modal {
  width: 100%;
  height: 1000%;
  z-index: 11501;
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 0;

  .content {
    width: 100%;
    background-color: #000000;
    z-index: 11500;
    text-align: left;
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 75rpx 0rpx 85rpx 0rpx;
    opacity: 0.85;

    .flex {
      display: flex;
      justify-content: center;
    }

    .title {
      line-height: 52rpx;
      font-size: 24rpx;
      margin-left: 10rpx;
      color: #ffffff;
    }

    .link {
      border-bottom: 1px solid #ffffff;
    }

    .btn-wrap {
      margin-top: 75rpx;
      margin-bottom: 0;
      text-align: center;
    }

    .confirm-btn {
      border: 1px solid #fff;
      background-color: transparent;
      -webkit-border-radius: 0;
      border-radius: 0;
      margin: 0rpx 20rpx;
      width: 224rpx;
      height: 68rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      letter-spacing: 1rpx;
      font-size: 24rpx;
    }
  }
}
</style>
